<template >
  <div :view-id="isok" class="unit-left-li" :class="{'lv1':model.level==1,'lv2':model.level==2,'lv3':model.level==3,'lv4':model.level==4}">
    <!-- <i class="iconfont" v-if="model.organizationUnits.length !== 0" :class="{'icon-tianjia':!open,'icon-jianqu':open,'icon-act':model.id == actid}" @click="toggle"></i> -->

<i class="iconfont"  :class="{'icon-tianjia':!open,'icon-jianqu':open,'icon-act':model.id == actid}" @click="toggle"></i>
    <div class="unit-ltetp" :class="{'active': model.id == actid,'textlv1':model.level==1,'textlv2':model.level==2,'textlv3':model.level==3,'textlv4':model.level==4}" @click="viewInfo(model.id)">
      {{model.displayName}}
    </div>
    <!-- <div class="changebtn"  v-if="hasrule&&model.createOrganzationType == '1'" :class="{'iconlv1':model.level==1,'iconlv2':model.level==2,'iconlv3':model.level==3,'iconlv4':model.level==4}">
      <i class="iconfont icon-xiala"></i>
      <div class="dropdown">
       
       <p @click="commands('1',model.id)" v-if="model.isActive">撤销此机构</p>
        <p @click="commands('2',model.id)" v-else>恢复此机构</p>
        <p @click="commands('3',model.id)">新建子机构</p>
        <p v-if="model.ifAllowDel && model.parentId !==null" @click="commands('4',model.id)">删除</p>
        <p @click="commands('3',model.id)">新建子机构</p>
      </div>
    </div> -->
    <div v-show="open" v-if='model.organizationUnits &&model.organizationUnits.length >0'>
      <tree-menu v-for="(dd) in model.organizationUnits" :hasrule="hasrule" :parentid="parentid" :actid="actid" v-bind:key="dd.id" :commands="commands" :model="dd" :addNew="addNew" :viewInfo="viewInfo"></tree-menu>
    </div>

  </div>
</template>


<script>
export default {
  name: "treeMenu",
  props: {
    model: Object,
    parentid: Number,
    actid: Number,
    addNew: {
      type: Function,
      default: null
    },
    viewInfo: {
      type: Function,
      default: null
    },
    commands: {
      type: Function,
      default: null
    },
    hasrule:{//是否有新建编辑权限
      type:Boolean
    }
  },

  computed: {
    isFolder: function() {
      return (
        this.model.organizationUnits && this.model.organizationUnits.length
      );
    },
    isok: function() {
      if (this.parentid == this.model.id) {
        this.open = true;
      }
    }
  },
  data() {
    return {
      open: false,
      ppid: this.parentid,
      pdata: this.model
    };
  },
  mounted() {
    if (this.ppid == this.pdata.id) {
    }
  },
  methods: {
    toggle() {
      //if (this.isFolder) {
        this.open = !this.open;
    //  }
    },

    //操作回调
    handleCommand(command) {
      this.addNew(command);
    }
  },
  components: {
    name: "unittree"
  }
};
</script>

<style lang='scss' scoped>
.unit-left-li {
  position: relative;
  i {
    line-height: 1;
    z-index: 2;
    cursor: pointer;
  }
  .icon-tianjia,
  .icon-jianqu {
    position: absolute;
    left: 15px;
    top: 13px;
    color: #aeaeae;
    line-height: 1;
    font-size: 14px;
  }
  .icon-xinjian {
    position: absolute;
    right: 28px;
    top: 14px;
    display: none;
  }
  .icon-act {
    color: #ee6000;
  }
  .unit-ltetp {
    cursor: pointer;
    height: 40px;
    padding-left: 35px;
    position: relative;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    padding-right: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
  }
  .unit-ltetp:hover {
    background: #fff;
  }
  .active,
  .active:hover {
    background: #fff;
    color: #ee6000;
  }
  .active::after {
    height: 40px;
    width: 4px;
    background: #ff7819;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    z-index: 3;
    content: "";
  }
  .unit-left-li {
    .unit-ltetp {
      padding-left: 50px;
    }
    .icon-tianjia,
    .icon-jianqu {
      left: 30px;
    }
    .unit-left-li {
      .unit-ltetp {
        padding-left: 70px;
      }
      .icon-tianjia,
      .icon-jianqu {
        left: 51px;
      }
    }
  }
}
// .unit-left-li:hover > .unit-ltetp + .icon-xinjian {
//   display: block;
// }
.unit-left-li {
  .icon-sanjiao {
    position: absolute;
    right: -6px;
    top: 12px;
    color: #fff;
    z-index: 238;
    font-size: 18px;
  }
}
.unit-left-li:hover {
  // .unit-ltetp {
  //   background: #fff;
  // }
}
.lv1:hover {
  .iconlv1 {
    display: block;
  }
  .textlv1{
    background: #fff;
  }
}
.lv2:hover {
  .iconlv2 {
    display: block;
  }
  .textlv2{
    background: #fff;
  }
}

.lv3:hover {
  .iconlv3 {
    display: block;
  }
  .textlv3{
    background: #fff;
  }

}
.lv4:hover {
  .iconlv4 {
    display: block;
  }
  .textlv4{
    background: #fff;
  }
}
// .unit-left-li.unit-left-top {
// .unit-ltetp{
//         padding-left:0;
//       }
// }
.let-drop {
  position: absolute;
  right: 28px;
  top: 9px;
  display: none;
}
.unit-drop-menu:hover {
  .el-dropdown-menu {
    display: block !important;
  }
}
.unit-drop-menu {
  position: absolute;
  right: 28px;
  top: 9px;
  padding: 10px;
  .el-dropdown-menu {
    transition: all ease 0.5s;
    top: 18px;
  }
}
.drop-menu-text {
  width: 100px;
  padding: 0 7px;
}
.drop-alone.el-button--mini:focus,
.drop-alone.el-button--mini:hover {
  background: #f7f7f7;
}
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #606266;
}
.changebtn {
  width: 59px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  .icon-xiala {
    border: 1px solid #999999;
    color: #999999;
    border-radius: 3px;
  }
  .dropdown {
    display: none;
    position: absolute;
    width: 100px;

    min-height: 31px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #ffffff;
    right: 0;
    top: 40px;
    z-index: 33;
    p {
      text-align: center;
      font-size: 13px;
      color: #666666;
      line-height: 31px;
      margin: 0;
      padding: 0 7px;
      cursor: pointer;
    }
    p:not(:last-of-type) {
      border-bottom: 1px solid #dddddd;
    }
  }
}
.changebtn:hover .dropdown {
  display: block;
}
.dropdown > p:hover {
  background-color: #ecf5ff;
}
</style>
